<!--
  @desc: tab内容切换
  @author: lanbao
-->
<template>
  <div>
    <div v-for="(child, i) in list" :key="i" class="tabContent md-example-child md-example-child-detail-item md-example-child-detail-item-0">
    <md-field>
        <md-detail-item v-for="(item, j) in child.children" :key='j' :title="item.title" :content="item.content" />
    </md-field>
  </div>
  </div>
</template>

<script>
import {Field, DetailItem} from 'mand-mobile'

export default {
  name: 'detail-item-demo',
  props: {
    list: Array
  },
  components: {
    [Field.name]: Field,
    [DetailItem.name]: DetailItem
  }
}
</script>

<style lang="stylus" scoped>
  .tabContent
    .md-field
      width 95%
      padding 0
      margin 10px auto
      border-radius 8px
      background #f4f4f4
      .md-detail-item
        padding 10px
        font-size 18px
</style>
